<!--banner start-->
<div class="fullSlide">
  <div class="bd">
    <ul>
      <% Cip::Category.find_by(slug: 'carousel').pages.order(:position).each do |page| %>
        <li _src='url(<%= page.avatar.url(:original) %>)' ><a href='<%= page.url %>'></a></li>
      <% end %>
    </ul>
  </div>
  <div class="hd"><ul></ul></div>
  <span class="prev"></span>
  <span class="next"></span>
</div>

<script type="text/javascript">
$(".fullSlide").hover(function(){
    $(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.3)
},
function(){
    $(this).find(".prev,.next").fadeOut()
});
$(".fullSlide").slide({
    titCell: ".hd ul",
    mainCell: ".bd ul",
    effect: "fold",
    autoPlay: true,
    autoPage: true,
    trigger: "click",
    startFun: function(i) {
        var curLi = jQuery(".fullSlide .bd li").eq(i);
        if ( !! curLi.attr("_src")) {
            curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
        }
    }
});
</script>
<!--banner end-->
